<script setup>
import Icon from '@/components/SVG/index.vue';
import Images from '@/components/Images/Index.vue';
</script>

<template>
  <div class="g-member__list">
    <!-- 搜索框 -->
    <div class="g-member__list__search">
      <Icon use="gengduo-sangedian" size="1.4em" class="icon" />
      <input type="text" placeholder="搜索群成员">
    </div>
    <!-- 内容 -->
    <div class="g-member__list__main">
      <div class="item" v-for="item in 15">
        <Images class="avatar" :src="'user?.avatar'" />
        <span class="userName">名称</span>
      </div>

      <div class="add">
        <div class="add__icon">
          <Icon use="add" size="1.2em" />
        </div>
        <span class="add__btn">添加</span>
      </div>
    </div>
    <!-- 查看更多 -->
    <div class="g-member__list__more">
      <span class="more">查看更多</span>
      <Icon use="gengduo-sangedian" size="1.2em" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.g-member__list {
  padding: 10px 20px;
  border-bottom: 1px solid #e1e1e1;


  &__search {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    padding: 10px 0;

    .icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    >input {
      outline: none;
      border: none;
      background-color: #e1e1e1;
      color: #818181;
      width: 100%;
      height: 100%;
      padding: 4px 0 4px 1.6em;
      box-sizing: border-box;
      float: left;
    }
  }

  &__main {
    $size: 34px;
    font-size: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px 0 0;
    margin: 6px 0;

    .add {
      display: flex;
      flex-direction: column;
      align-items: center;

      &__icon {
        border: 1px solid #ccc;
        width: $size;
        height: $size;
        box-sizing: border-box;

        // margin: auto;
        >* {
          margin: auto;
          height: 100%;
        }
      }

      &__btn {
        color: #444444;
        margin: auto;
        text-align: center;
      }
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .avatar {
        width: $size;
        height: $size;
      }
    }
  }

  &__more {
    font-size: 14px;
    width: 100%;
    height: 26px;
    color: #818181;
    box-sizing: border-box;
    padding: 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>